<!-- 收油记录 -->
<template>
	<view class="container">
		<!-- 搜索筛选区域 -->
		<view class="search-container">
			<view class="search-row">
				<view class="search-item  user-search">
					<text class="search-label">收运员:</text>
					<uni-easyinput v-model="searchData.userName" placeholder="请输入收运员" />
				</view>
			</view>
			<view class="search-row">
				<!-- <view class="search-item  user-search">
					<text class="search-label">商户油脂类型:</text>
					<ld-select :multiple="true" :list="options2" label-key="label" value-key="value" placeholder="请选择"
						clearable v-model="reportTypeList" @change="selectChange2"></ld-select>
				</view> -->
				<view class="search-item  user-search">
					<text class="search-label">油脂类型:</text>
					<ld-select :list="options2"
					                label-key="label" value-key="value"
					                placeholder="请选择"
					                clearable
					                v-model="searchData.type"
					                ></ld-select>
					<!-- <uni-data-select v-model="searchData.type" :localdata="options2" /> -->
				</view>
			</view>

			<view class="search-row">
				<uni-datetime-picker v-model="collectionDate" type="datetimerange" rangeSeparator="至" />
			</view>
			<view class="search-btn-group">
				<button class="search-btn" @click="handleSearch">搜索</button>
				<button class="reset-btn" @click="handleReset">重置</button>
			</view>
		</view>

		<!-- 分页组件 -->
		<uni-pagination class="pagination" :current="pageNum" :total="total" :pageSize="pageSize"
			@change="handlePageChange" />

		<scroll-view class="scroll-container" scroll-y style="height: calc(100vh - 160rpx)">
			<view v-for="record in records" :key="record.id" class="record-item">
				<view class="record-header">
					<text class="merchant-id">商户名称: {{ record.name }}</text>
					<view class="action-btns">
						<!--            <button class="edit-btn" @click="editRecord(record.id)">编辑</button>-->
						<button class="delete-btn" @click="handleSignleExport(record.id)">联单</button>
					</view>
				</view>
				<view class="record-content">
					<view class="field-row">
						<text class="label">收运员:</text>
						<text class="value">{{ record.userName }}</text>
					</view>
					<view class="field-row">
						<text class="label">收运时间:</text>
						<text class="value">{{ record.collectionDate }}</text>
					</view>
					<view class="field-row">
						<text class="label">实际到达时间:</text>
						<text class="value">{{ record.arriveTime }}</text>
					</view>
					<view class="field-row">
						<text class="label">商户类型:</text>
						<text class="value">{{ selectDictLabels(optionsType, record.type) }} </text>
					</view>
					<view class="field-row" v-if="record.type.includes(2)">
						<text class="label">地上油收油量:</text>
						<text class="value">{{ record.groundQuantity }} 公斤</text>
					</view>
					<view class="field-row" v-if="record.type.includes(2) && checkPermi(['system:record:price'])">
						<text class="label">地上油单价:</text>
						<text class="value">{{ record.groundPrice }} 元/公斤</text>
					</view>
					<view class="field-row" v-if="record.type.includes(3)">
						<text class="label">地下油收油量:</text>
						<text class="value">{{ record.undergroundQuantity }} 公斤</text>
					</view>
					<view class="field-row" v-if="record.type.includes(1)">
						<text class="label">灶台油收油量:</text>
						<text class="value">{{ record.stoveQuantity }} 公斤</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		listRecord,
		recordForm
	} from '@/api/system/record.js';
	import config from '@/config'
	const baseUrl = config.baseUrl
	import {
		getToken
	} from '@/utils/auth';
	import {
		parseTime
	} from '@/utils/ruoyi'
	import {
		queryInfo
	} from "@/api/system/merchant.js"
	import {
		checkPermi,
		checkRole
	} from "@/utils/permission"; // 权限判断函数
	import {
		getDicts
	} from "@/api/system/dict/data";
	import {
		selectDictLabel,
		selectDictLabels //主要是这个
	} from '@/utils/ruoyi'
	export default {
		//name: "收运记录",
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				total: 0,
				records: [],
				options: [],
				options2: [],
				optionsType: [],
				reportTypeList: [],
				collectionDate: [new Date().toISOString().slice(0, 10) + " 00:00:00", new Date().toISOString().slice(0,
					10) + " 23:59:59"],
				merchant: {
					id: null,
					districtName: null,
					address: null,
					oilPoolVolume: null,
					signDate: null,
					contactPerson: null,
					phone: null,
					notes: null,
					oilCollector: null,
					oilDrumCount: null,
				},
				// 查询参数
				queryParams: {
					phone: null,
				},
				searchData: {
					userName: '', // 收运员名称
					type: '', // 油脂类型
					collectionDateStart: new Date().toISOString().slice(0, 10) + " 00:00:00", // 开始日期
					collectionDateEnd: new Date().toISOString().slice(0, 10) + " 23:59:59" // 结束日期
				},


			};
		},
		onLoad(options) {
			// 加载数据
			// this.fetchData();
			// 数据字典
			getDicts("fqyz_type").then(response => {
				this.options2 = response.data.map(item => ({
					value: item.dictValue,
					label: item.dictLabel
				}))
			})
		},
		onShow(options) {

			this.fetchData();
		},
		methods: {
			checkPermi,
			checkRole,
			selectDictLabel,
			selectDictLabels,
			// 加载数据
			async fetchData() {
				try {
					// 数据字典
					await getDicts("fqyz_type").then(response => {
						this.optionsType = response.data.map(item => ({
							value: item.dictValue,
							text: item.dictLabel
						}))
					})

					// 用户信息
					this.queryParams.phone = this.$store.state.user.phonenumber;
					console.log(this.queryParams)
					console.log(this.$store.state.user)
					if (this.queryParams.phone != null && this.queryParams.phone != '') {
						const merchantRes = await queryInfo(this.queryParams);
						if (merchantRes.code == 200 && merchantRes.data != null) {
							this.merchant = merchantRes.data;
						}
					}

					const res = await listRecord({
						'pageNum': this.pageNum,
						'pageSize': this.pageSize,
						'merchantId': this.merchant.id,
						...this.searchData
					});
					this.records = res.rows;
					this.total = res.total;
				} catch (error) {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			},
			// 翻页
			handlePageChange(e) {
				this.pageNum = e.current;
				this.fetchData();
			},
			// 搜索
			handleSearch() {

				this.searchData.collectionDateStart = this.collectionDate[0]
				this.searchData.collectionDateEnd = this.collectionDate[1]
				// 重置页码
				this.pageNum = 1;
				this.fetchData();
			},
			// 重置搜索条件
			handleReset() {
				this.searchData = {
					userName: '',
					type: '',
					collectionDateStart: new Date().toISOString().slice(0, 10) + " 00:00:00",
					collectionDateEnd: new Date().toISOString().slice(0, 10) + " 23:59:59"
				};
				// 重置页码并重新加载数据
				this.pageNum = 1;
				this.fetchData();
			},
			formatDateDay(value) {
				const data = new Date(value);
				var month = data.getMonth() + 1;
				var day = data.getDate();
				const year = data.getFullYear();

				if (month < 10) month = "0" + month;
				if (day < 10) day = "0" + day;

				const formattedTime = `${year}-${month}-${day}`;
				return formattedTime;
			},
			/** 联单 */
			async handleSignleExport(id) {

				const res = await recordForm({
					'id': id
				});


				// 假设接口请求完成，返回了base64字符串
				const base64Value = res.data
				// 文件保存路径
				const filePath = `${wx.env.USER_DATA_PATH}/${new Date().getTime()}.docx`
				// 保存excle到手机上
				wx.getFileSystemManager().writeFile({
					filePath: filePath,
					data: base64Value,
					encoding: 'base64',
					success: () => {
						// 保存成功后打开，也可以不打开，看你需求
						setTimeout(() => {
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								fileType: 'docx',
								fail: (error) => {
									// 打开excel失败
								}
							})
						}, 500)
					},
					fail: (error) => {
						// 保存excel失败
					}
				})

			},
		}
	}
</script>



<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.toolbar {
		/* margin-bottom: 20rpx; */
	}

	.add-btn {}

	.pagination {
		margin: 20rpx 0;
	}

	.scroll-container {
		border-radius: 12rpx;
		background-color: white;
		overflow: hidden;
	}

	.record-item {
		margin: 10rpx 0;
		padding: 20rpx;
		background-color: white;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.record-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #e5e5e5;
		padding-bottom: 10rpx;
	}

	.merchant-id {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.action-btns {
		display: flex;
		gap: 10rpx;
	}

	.edit-btn {
		background-color: #55B3FF;
		color: white;
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}

	.delete-btn {
		background-color: #FF6666;
		color: white;
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}

	.field-row {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.label {
		width: 300rpx;
		color: #666;
		font-weight: bold;
	}

	.value {
		flex: 1;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 响应式布局 */
	@media (min-width: 750rpx) {
		.scroll-container {
			width: 70%;
			margin: 0 auto;
		}
	}

	.search-container {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.search-row {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.search-item {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.search-label {
		display: inline-block;
		width: 200rpx;
		margin-right: 10rpx;
		color: #666;
	}

	.search-btn-group {
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}

	.search-btn,
	.reset-btn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.search-btn {
		background-color: #1989fa;
	}

	.reset-btn {
		background-color: #999;
	}

	.user-search {
		flex: 1;
	}
</style>